<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">任务详情</h2>
      <p class="text-gray-400">查看任务的详细信息和执行状态</p>
    </div>
    
    <div class="space-y-6">
      <!-- 任务基本信息 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-info-circle mr-2"></i>基本信息
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div>
            <label class="block text-sm text-gray-400 mb-1">任务ID</label>
            <p class="text-tech-blue font-mono text-lg">#001</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">任务名称</label>
            <p class="text-white">Web登录流程测试</p>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-1">状态</label>
            <span class="flex items-center">
              <span class="status-indicator busy w-3 h-3 bg-yellow-400 rounded-full mr-2"></span>
              <span class="text-yellow-400">运行中</span>
            </span>
          </div>
        </div>
      </div>

      <!-- 执行进度 -->
      <div class="glass-effect rounded-xl p-6 tech-card">
        <h3 class="text-lg font-bold cyber-text mb-4 flex items-center">
          <i class="fas fa-chart-line mr-2"></i>执行进度
        </h3>
        <div class="space-y-4">
          <div class="flex justify-between items-center">
            <span class="text-gray-300">总体进度</span>
            <span class="text-tech-blue font-mono">75%</span>
          </div>
          <div class="w-full h-4 bg-gray-700 rounded-full overflow-hidden">
            <div class="tech-progress h-full w-3/4"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 任务详情页面
</script>

